import { screen } from '@testing-library/react';
import { append } from 'ramda';
import { Route, Routes } from 'react-router';

import { RoutesConfig } from '../../../../app/config/routes';
import { fill{{ pascalCase name }}ListQuery } from '../../../../mocks/factories/{{ camelCase name }}';
import { createMockRouterProps, render } from '../../../../tests/utils/rendering';
import { {{ pascalCase name }}Details } from '../{{ camelCase name }}Details.component';

describe('{{ pascalCase name }}Details: Component', () => {
  const routePath = ['{{ camelCase name }}', 'details'];
  const defaultItemId = 'test-id';

  const Component = () => (
    <Routes>
      <Route path={RoutesConfig.getLocalePath(routePath)} element={<{{ pascalCase name }}Details />} />
    </Routes>
  );

  it('should render item details', async () => {
    const routerProps = createMockRouterProps(routePath, { id: defaultItemId });
    const data = { id: defaultItemId, name: 'demo item name' };
    const mockRequest = fill{{ pascalCase name }}ListQuery([data]);

    render(<Component />, { routerProps, apolloMocks: append(mockRequest) });

    expect(await screen.findByText(/Loading .../i)).toBeInTheDocument();
    expect(await screen.findByText(/demo item name/i)).toBeInTheDocument();
  });
});
